<template>
  <div class="login">
    <!-- 给表单加上一个rules属性，值自定义 -->
    <!-- 定义一个ref属性 用于获取dom元素 进行简单验证 -->
    <!-- :model="myform"用来收集表单数据 -->
    <el-form :model="myform" class="container" :rules="loginCheck" ref="loginRef">
      <el-form-item>
        <div class="avatar">
          <img src="../assets/avatar.jpg" alt="头像">
        </div>
      </el-form-item>
      <!-- 给el-form-item添加需要验证的prop属性，它的值必须和data里定义好的变量名称一样 -->
      <el-form-item prop="userName">
      <el-input v-model="myform.userName" prefix-icon="myicon myicon-user"></el-input>
      </el-form-item>
          <!-- 给el-form-item添加需要验证的prop属性，它的值必须和data里定义好的变量名称一样 -->
       <el-form-item prop="passWord">
      <el-input type="password" v-model="myform.passWord" prefix-icon="myicon myicon-key" @keyup.enter.native='handlerCheck'></el-input>
     </el-form-item>
     <!-- 绑定点击事件 里面写处理函数 -->
     <!-- 就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的 -->
      <el-button type="primary" class="login-btn" @click="handlerCheck" >立即登录</el-button>
    </el-form>
  </div>
</template>
<script>
// 引入封装好的登录请求
import { login } from '@/api'
export default {
  data () {
    return {
      myform: {
        userName: 'admin',
        passWord: '123456'
      },
      loginCheck: {
        userName: [
          { required: true, message: '请输用户名', trigger: 'blur' }
        ],
        passWord: [{ required: true, message: '请输密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handlerCheck () {
      // 通过ref获取dom元素，然后调用validate方法，该方法是封装好的，直接调用，它的里面有一个带参数的回调，那个参数是布尔类型，为true表示验证通过
      this.$refs.loginRef.validate(valid => {
        if (valid) {
          // 校验通过就发送登录请求
          login({ username: this.myform.userName, password: this.myform.passWord })
            .then(res => {
              if (res.data.meta.status === 200) {
                // 第一次请求，登录成功，保存token到本地存储,要放在跳转页面的前面，不然要点两次按钮才能登录
                localStorage.setItem('token', res.data.data.token)
                // 登录成功后，还要保存用户名，首页需要用到
                localStorage.setItem('username', res.data.data.username)
                // 登录成功，跳转页面
                this.$router.push({ name: 'home' })
              } else {
                // 登录失败，弹窗提示
                this.$message.error(res.data.meta.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          console.log('信息错误，请重新输入')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .login {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #2f4050;

    .container {
      position: absolute;
      left: 0;
      right: 0;
      width: 400px;
      padding: 0px 40px 15px 40px;
      margin: 200px auto;
      background: white;
      .avatar {
        position: relative;
        left: 50%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 10px solid #fff;
        box-shadow: 0 1px 5px #ccc;
        overflow: hidden;
      }
      .login-btn {
        width: 100%;
      }
    }
  }
</style>
